/* Shared section rhythm; never a second page framework. */
.content_section {
  position: relative;
  isolation: isolate;
  padding: var(--space-16) var(--space-6);
}
.content_section[data-variant='surface'] {
  background: var(--bg-surface);
}
.content_section[data-variant='pattern'],
.content_section[data-variant='closing'],
.content_section[data-variant='opening'] {
  background: var(--bg-pattern);
}
.content_section[data-variant='opening'] {
  padding-top: var(--space-32);
}
.content_section[data-variant='intro'] {
  padding-block: var(--space-12);
}
.content_section[data-variant='compact'] {
  padding-block: var(--space-12);
}
.content_section[data-variant='closing'] {
  padding-top: var(--space-0);
}
@media (min-width: 64rem) {
  .content_section {
    padding-block: var(--space-20);
  }
  .content_section[data-variant='opening'] {
    padding-top: var(--space-40);
  }
}

.content_section[data-variant='pattern']::before,
.content_section[data-variant='closing']::before,
.content_section[data-variant='opening']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-sink);
  background: url('../images/bg-pattern.svg') center / cover no-repeat fixed;
  pointer-events: none;
  filter: brightness(1.15) sepia(0.35) saturate(0.8) contrast(0.85);
  opacity: 0.45;
}